<template>
  <div id="weibo">
    <v-text-field
      v-model.lazy.trim="msg"
      label="Weibo content"
      placeholder="Edit your weibo..."
      name="content"
      cols="30"
      auto-grow
      box
      textarea
    />
    <v-btn @click="send">
      Send
    </v-btn>
    <ul>
      <li
        v-for="(item, index) in content"
        :key="index"
        class="list"
      >
        {{ content[content.length-(index+1)] }}
        <button
          class="del"
          @click="del(index)"
        >
          删除
        </button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data: () => ({
    // content: ['这是一条微博,很长很长的微博。呀呀呀呀呀呀呀呀。','0000'],
    content: [],
    translte: '',
    msg: '',
    seen: true,
  }),
  methods: {
    send() {
      console.log('object :', this.content.length);
      if (this.msg != '') {
        this.content.push(this.msg);
      } else alert('请输入内容后发送');
      this.msg = '';
    },
    del(index) {
      this.content.splice(this.content.length - index - 1, 1);
      console.log('object :', this.content.length - (index + 1));
    },
  },
};
</script>

<style>
ul,
li,
a,
body,
html,
div,
button,
textarea {
  padding: 0;
  margin: 0;
  list-style: none;
}

#weibo {
  /* float: left; */
  /* height: 500px; */
  width: 450px;
  margin-left: 20%;
  margin-top: 10%;
}

.content {
  padding: 5px;
  height: 150px;
  width: 320px;
  font-size: 20px;
}

.button {
  background-color: rgba(49, 48, 47, 0.431);
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  height: 20px;
  width: 50px;
  line-height: 20px;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 15px;
  /* float: right; */
}

.list {
  padding: 10px;
  /* height: 50px; */
  width: 300px;
  line-height: 25px;
  margin-top: 15px;
  border: 1px solid black;
  background-color: rgb(187, 204, 206);
  text-indent: 2em;
  position: relative;
  word-break: break-all;
}

.del {
  position: absolute;
  height: 25px;
  width: 60px;
  border: 1px solid black;
  /* float: right; */
  margin-top: 5px;
  background-color: rgb(246, 40, 33);
  text-align: center;
  font-weight: bold;
  line-height: 25px;
  font-size: 14px;
  right: 5px;
  /* bottom: 5px; */
}
</style>
